import React,{useState} from 'react'
import '../assets/css/dialog.scss'
export default function Dialog(props) {
  const [id,setId]=useState('')
  const [name,setName]=useState('')
  const [price,setPrice]=useState('')
  const [salePrice,setSalePrice]=useState('')
  const [status,setStatus]=useState(1)
  const inputId=(e)=>{
    setId(e.target.value)
  }
  const inputName=e=>setName(e.target.value)
  const inputPrice=e=>setPrice(e.target.value)
  const inputSalePrice=(e)=>{
    setSalePrice(e.target.value)
  }
  const addProduct=()=>{
    console.log('id',id);
    console.log('name',name);
    console.log('price',price);
    console.log('salePrice',salePrice);
    console.log('status',status);
    let product={id,name,price:~~price,salePrice:~~salePrice,status:~~status}
    props.callback(product)

  }
  const inputStatus=(e)=>{
    setStatus(e.target.value)
  }
  return (
    <div className='dialog'>
       <div className='item'>
            <input type="text" placeholder='请输入商品编号' className='txt' onChange={inputId}/>
       </div>
       <div  className='item'>
            <input type="text" placeholder='请输入商品名称' className='txt'  onChange={inputName}/>
       </div>
       <div  className='item'>
            <input type="text" placeholder='请输入商品价格' className='txt'  onChange={inputPrice}/>
       </div>
       <div  className='item'>
            <input type="text" placeholder='请输入商城价' className='txt'  onChange={inputSalePrice}/>
       </div>
       <div  className='item1'>
           <input type="radio" value={1} name="status" className="radio" onChange={inputStatus} checked={status==1?true:false}/>上架 
           <input type="radio" value={0} name="status" className="radio" onChange={inputStatus} />下架
       </div>
       <div  className='item'>
            <button className='addbtn' onClick={addProduct}>添加</button>
       </div>
    </div>
  )
}
